package cn.aihongbo.kmp.pages.home

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ScrollableTabRow
import androidx.compose.material.Tab
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.aihongbo.kmp.data.bean.ClassicTravelBean
import cn.aihongbo.kmp.data.vm.HomeViewModel
import coil3.compose.AsyncImage
import kotlinproject.composeapp.generated.resources.Res
import kotlinproject.composeapp.generated.resources.hbc_default_name
import kotlinproject.composeapp.generated.resources.home_bottom_ad1
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview

@Preview
@Composable
fun HomeTravelView(viewModel: HomeViewModel) {

    val selectedTabIndex = remember { mutableStateOf(0) }

    Column {
        ScrollableTabRow(
            selectedTabIndex = selectedTabIndex.value,
            modifier = Modifier.padding(start = 16.dp).fillMaxWidth().height(40.dp),
            backgroundColor = Color.Transparent,
            indicator = {},
            divider = {},
            edgePadding = 0.dp
        ) {
            viewModel.travelDict.forEachIndexed { index, bean ->
                Tab(
                    selectedTabIndex.value == index,
                    selectedContentColor = Color(0xFFFAF6F3),
                    unselectedContentColor = Color(0xffffffff),
                    interactionSource = MutableInteractionSource(),
                    onClick = {
                        selectedTabIndex.value = index
                        viewModel.loadQueryClassicTravel(bean)
                    },
                    text = {
                        Text(
                            bean?.travelLineName ?: "",
                            color = if (selectedTabIndex.value == index) Color(0xFFFA434C) else Color(
                                0xFF666666
                            )
                        )
                    },
                    modifier = Modifier.padding(end = 12.dp).background(
                        if (selectedTabIndex.value == index) Color(0xFFFAF6F3) else Color.White,
                        shape = RoundedCornerShape(16.dp)
                    ).border(
                        1.1.dp, if (selectedTabIndex.value == index) Color(0xFFFA434C) else Color(
                            0xfff2f5f6
                        ), RoundedCornerShape(16.dp)
                    )
                )
            }
        }

        LazyVerticalStaggeredGrid(
            columns = StaggeredGridCells.Fixed(2),
            contentPadding = PaddingValues(8.dp, 8.dp),
            verticalItemSpacing = 8.dp,
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.heightIn(0.dp, 1000.dp)
        ) {
            for (bean in viewModel.classicTravel) item {
                HomeClassicTravelItemView(bean)
            }
            item(span = StaggeredGridItemSpan.FullLine) {
                HomeBottomAds()
            }
        }
    }
}

@Composable
fun HomeBottomAds() {
    Column(
        modifier = Modifier.padding(horizontal = 18.dp, 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(Res.drawable.home_bottom_ad1),
            contentDescription = null,
            modifier = Modifier.padding(top = 12.dp)
        )
        Image(
            painter = painterResource(Res.drawable.hbc_default_name),
            contentDescription = null,
            modifier = Modifier.padding(top = 16.dp, bottom = 24.dp)
        )
    }
}

@Composable
fun HomeClassicTravelItemView(bean: ClassicTravelBean?) {
    Column(
        modifier = Modifier.background(Color.White, shape = RoundedCornerShape(8.dp)),
    ) {
        AsyncImage(
            model = bean?.headImage,
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier.fillMaxWidth().defaultMinSize(minHeight = 100.dp).background(
                Color(0xA6DADADA), shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp)
            ).clip(RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp))
        )
        Column(
            modifier = Modifier.padding(
                top = 12.dp, start = 18.dp, end = 18.dp, bottom = 24.dp
            )
        ) {
            Text(
                bean?.travelName ?: "",
                color = Color(0xff020202),
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold
            )
            Row(
                modifier = Modifier.padding(top = 12.dp),
                horizontalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                Text(
                    "老客可享立减",
                    color = Color(0xff6F431B),
                    fontSize = 10.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.height(22.dp).background(
                        Color(0xffFFF0D3), shape = RoundedCornerShape(6.dp)
                    ).border(1.dp, Color(0xff6F431B), shape = RoundedCornerShape(6.dp))
                        .padding(horizontal = 6.dp)
                )
                Text(
                    "包车",
                    color = Color(0xff23C343),
                    fontSize = 10.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.height(22.dp).background(
                        Color(0x3023C343), shape = RoundedCornerShape(6.dp)
                    ).border(1.dp, Color(0xff23C343), shape = RoundedCornerShape(6.dp))
                        .padding(horizontal = 6.dp)
                )
            }
            Text(
                "最近${bean?.bookedNum}+人预定过",
                color = Color(0x886F431B),
                fontSize = 12.sp,
                modifier = Modifier.padding(top = 4.dp)
            )
            Row(modifier = Modifier.padding(top = 4.dp)) {
                Text(
                    "¥${if (bean?.minPrice != null) bean.minPrice / 100 else 99999}",
                    color = Color(0xFFFF2444),
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold
                )
                Text(
                    "起", color = Color(0xFFFF2444), fontSize = 12.sp, modifier = Modifier.align(
                        Alignment.Bottom
                    ).padding(top = 1.5.dp, start = 2.dp)
                )
            }
        }
    }
}